<template>
  <div>
        <!-- seach区域 -->
        <div class="seach">
            <span class="seachStatus">
                {{$t('accountingtime')}}
                <el-date-picker :placeholder="$t('plsset')" v-model="transTime" width="20%" type="daterange" :range-separator="$t('to')" :start-placeholder="$t('startdate')" :end-placeholder="$t('dateclosed')" format="yyyy-MM-dd" value-format="yyyy-MM-dd" size="mini"></el-date-picker>
            </span>
            <span class="seachCSC">
                {{$t('mertnam')}}
                <el-input v-model.trim="clarifyForm.merName" :disabled="true" :placeholder="$t('plsipt')" size="mini"></el-input>
            </span>
            <div class="NOUS">
                <el-button type="primary" @click="seach" size="mini" v-preventReClick>{{$t('qury')}}</el-button>
                <el-button type="success" @click="exportExcel" size="mini" v-preventReClick>{{$t('expot')}}</el-button>
            </div>
        </div>
        <!-- 内容区域 -->
        <el-card class="cardBox">
            <el-table border style="width: 100%" row-key="funcId" :data="clarifyTab" id="out-table">
                <el-table-column type="index" :label="$t('sernum')">
                </el-table-column>
                <el-table-column prop="merName" :label="$t('mertnam')" width="102">
                </el-table-column>
                <el-table-column prop="merId" :label="$t('mertid')" width="150">
                </el-table-column>
                <el-table-column prop="initialAmt" :label="$t('initialbalance')" width="134">
                </el-table-column>
                <el-table-column prop="finalAmt" :label="$t('endingbalance')" width="134">
                </el-table-column>
                <el-table-column prop="dayInAmt" :label="$t('totalrevenuem')" width="133">
                </el-table-column>
                <el-table-column prop="dayInCount" :label="$t('totalrevenue')" width="124">
                </el-table-column>
                <el-table-column prop="dayOutAmt" :label="$t('totalamoisbur')" width="165">
                </el-table-column>
                <el-table-column prop="dayOutCount" :label="$t('totalexpenditure')" width="134">
                </el-table-column>
                <el-table-column prop="dayInFeeAmt" :label="$t('totamofsercharge')" width="128">
                </el-table-column>
                <el-table-column prop="dayInFeeCount" :label="$t('totnumofhandcharges')" width="130">
                </el-table-column>
                <el-table-column prop="billingDate" :label="$t('accountingtime')" width="160">
                </el-table-column>
                <el-table-column :label="$t('opratn')" width="90" fixed="right">
                    <template slot-scope="scope">
                        <el-link type="primary" @click="getAccquery(scope.row.billRecordId)">{{$t('accountquery')}}</el-link>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="clarifyForm.pageNum"
                :page-sizes="[10, 15, 20, 30]"
                :page-size="clarifyForm.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </el-card>
    </div>
</template>

<script>
import {
    getbilldaylist,
    getbilldayacclist
} from '@/libs/reqlist.js'
import { getInitDate } from '@/libs/getDate.js'
import Cooikes from 'js-cookie'
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
export default {
  data () {
    return {
      total: 0,
      transTime: [],
      clarifyForm: {
          billingDateEnd: null,
          billingDateStart: null,
          merId: 0,
          merName: '',
          orderParamIdx: 0,
          orderType: 0,
          pageNum: 1,
          pageSize: 10
      },
      clarifyTab: []
    }
  },
  methods: {
    getClarify () {
        getbilldaylist(JSON.stringify(this.clarifyForm)).then(res => {
            if (res.data.code === '000000') {
                this.total = res.data.data.total - 0
                this.clarifyTab = res.data.data.list
            }
        })
    },
    seach () {
        if (this.transTime !== null) {
            this.clarifyForm.billingDateStart = this.transTime[0] + ' 00:00:00'
            this.clarifyForm.billingDateEnd = this.transTime[1] + ' 00:00:00'
        }
        if (!this.transTime) {
            this.transTime = []
            this.clarifyForm.billingDateEnd = getInitDate(0, 0) + ' 00:00:00'
            this.clarifyForm.billingDateStart = getInitDate(7, 0) + ' 00:00:00'
            this.transTime.push(getInitDate(7, 0))
            this.transTime.push(getInitDate(0, 0))
        }
        this.clarifyForm.pageNum = 1
        this.getClarify()
    },
    handleSizeChange (newSize) {
        this.clarifyForm.pageSize = newSize
        this.getClarify()
    },
    // 监听总页数变化
    handleCurrentChange (newNum) {
        this.clarifyForm.pageNum = newNum
        this.getClarify()
    },
    exportExcel () {
        /* generate workbook object from table */
        var wb = XLSX.utils.table_to_book(document.querySelector('#out-table'))
        /* get binary string as output */
        var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
        try {
            FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), 'sheetjs.xlsx')
        } catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) }
        return wbout
    },
    getAccquery (id) {
        window.sessionStorage.setItem('billRecordId', id)
        this.$router.push('/sec/accquery')
    }
  },
  mounted () {
      if (Cooikes.get('meraccname') !== null) {
        this.clarifyForm.merName = Cooikes.get('meraccname')
      }
      this.clarifyForm.billingDateEnd = getInitDate(0, 0) + ' 00:00:00'
      this.clarifyForm.billingDateStart = getInitDate(7, 0) + ' 00:00:00'
      this.transTime.push(getInitDate(7, 0))
      this.transTime.push(getInitDate(0, 0))
      this.getClarify()
  }
}
</script>

<style lang="less" scoped>
@import './merledger.less';
</style>
